<template>
  <div class="comicInfoSubject">
    <div class="comicInfoHeader">
      <van-icon name="arrow-left" @click="returnPage()" /><font>{{
        comic.name
      }}</font>
    </div>
    <div class="comicInfo">
      <!-- :style="`background-image:url(${comic.imgPath});background-repeat: no-repeat;background-size:100%;filter: blur(5px);`" -->
      <div class="img">
        <a><img :src="comic.imgPath" /></a>
      </div>
      <div class="info">
        <p class="title">{{ comic.name }}</p>
        <p class="fraction">
          <van-rate
            v-model="comic.fraction"
            :size="7"
            color="#FFC125"
            void-icon="star"
            void-color="#eee"
          />
        </p>
        <p class="autor">作者:{{ comic.autor }}</p>
        <p class="lable">
          <font v-for="(item, index) in comic.lableList" :key="index">{{
            item
          }}</font>
        </p>
        <p class="content">{{ comic.content }}</p>
        <p class="moreContent" @click="moreContentShow = true">详情</p>
      </div>
    </div>
    <div class="optionDiv">
      <ul>
        <li
          :class="chapterOrChoose === true ? 'choose' : ''"
          @click="chapterOrChooseChange(0)"
        >
          目录
        </li>
        <li
          :class="chapterOrChoose === false ? 'choose' : ''"
          @click="chapterOrChooseChange(1)"
        >
          评论
        </li>
      </ul>
    </div>
    <div class="comicInfoSortMian">
      <font
        >{{ comic.chapterState }}: <font>{{ comic.lastChapter }}</font></font
      >
      <div class="comicSort" @click="sortChange()">
        <van-icon :name="iconSort" />{{ nameSort }}
      </div>
    </div>
    <div class="comicInfoMian">
      <div class="swiperMain">
        <van-swipe
          :show-indicators="false"
          @change="indexChange()"
          :loop="false"
          ref="swiperRefs"
        >
          <van-swipe-item class="chapters">
            <div
              v-for="(item, index) in comic.chapters"
              :key="index"
              @click="toComic(item)"
            >
              {{ item }}
            </div>
          </van-swipe-item>
          <van-swipe-item class="comment">
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
            >
              <van-cell v-for="(item, index) in comic.comment" :key="index">
                <div class="img"><img :src="item.headPortrait" alt="" /></div>
                <div class="userInfo">
                  <font class="userName">{{ item.name }}</font>
                  <font class="commentTime">{{ item.commentTime }}</font>
                  <font class="content">{{ item.content }}</font>
                </div>
              </van-cell>
            </van-list>
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <van-popup
      v-model="moreContentShow"
      closeable
      close-icon="close"
      position="bottom"
      :style="{ height: '40%' }"
      ><font>{{ comic.content }}</font></van-popup
    >
  </div>
</template>

<script>
export default {
  data () {
    return {
      comic: '',
      moreContentShow: false,
      chapterOrChoose: true,
      iconSort: 'descending',
      nameSort: '倒序',
      loading: false,
      finished: false
    };
  },
  created () {
    // {{ comic.content }}
    var id = this.$route.query.id;
    var chapters = [];
    if (id % 2 === 0) {
      for (var i = 0; i < 100; i++) {
        chapters.push(i + 1);
      }
    } else {
      for (var j = 0; j < 206; j++) {
        chapters.push(j + 1);
      }
    }

    var douluo = {
      name: '斗罗大陆',
      imgPath: 'http://mhfm7tel.cdndm5.com/42/41679/20200409101850_180x240_21.jpg',
      content: '唐三因偷学绝门派武功，被逼无奈怀揣着一身绝技和未完成的心愿跳崖明志，不料却带着前世记忆转世重生。还是小正太的他凭借天生双武魂先天满魄力的天赋走进了诺丁学院，遇到了野蛮可爱的萝莉小舞，同时也发现了自己的身世之谜。前世心愿今生能实现吗？',
      autor: '风炫动漫',
      lableList: ['热血', '冒险', '奇幻'],
      chapters: chapters,
      fraction: 4,
      comment: [
        { name: '666666', headPortrait: 'http://css99tel.cdndm5.com/v202012291638/blue/images/user/toux3.jpg', content: 'hahahahhahahahahahaha', commentTime: '2020-06-09' },
        { name: '88888', headPortrait: 'http://css99tel.cdndm5.com/v202012291638/blue/images/user/toux3.jpg', content: 'hahahahhahahahahahaha', commentTime: '2020-06-09' },
        { name: '三刀流', headPortrait: 'http://css99tel.cdndm5.com/v202012291638/blue/images/user/toux3.jpg', content: 'hahahahhahahahahahaha', commentTime: '2020-06-09' },
        { name: '一刀流', headPortrait: 'http://css99tel.cdndm5.com/v202012291638/blue/images/user/toux3.jpg', content: 'hahahahhahahahahahaha', commentTime: '2020-06-09' },
        { name: '666666', headPortrait: 'http://css99tel.cdndm5.com/v202012291638/blue/images/user/toux3.jpg', content: 'hahahahhahahahahahaha', commentTime: '2020-06-09' },
        { name: '天刑', headPortrait: 'http://css99tel.cdndm5.com/v202012291638/blue/images/user/toux3.jpg', content: 'hahahahhahahahahahaha', commentTime: '2020-06-09' },
        { name: '666666', headPortrait: 'http://css99tel.cdndm5.com/v202012291638/blue/images/user/toux3.jpg', content: 'hahahahhahahahahahaha', commentTime: '2020-06-09' },
        { name: '秀儿', headPortrait: 'http://css99tel.cdndm5.com/v202012291638/blue/images/user/toux3.jpg', content: 'hahahahhahahahahahaha', commentTime: '2020-06-09' }
      ],
      lastChapter: '206话',
      chapterState: '连载'
    };
    var mp = {
      name: '手机少年',
      imgPath: 'http://mhfm3tel.cdndm5.com/37/36079/20170830165816_180x240_23.jpg',
      content: '《手机少年》茗卡通·暴雨所画的长篇漫画，连载于《漫画世界》。故事以郑亦哲得到MP手机“幻”为起点，按照小哲和他的MP手机逐步成长由弱到强的过程为线索，讲述了手机少年团对抗强大的MAX新人类的故事。当MAX之神夜胜宇不再与其为敌后，与手机少年团一起对抗MP之父左戒，阻止其为了保护地球而毁灭人类的可怕梦想。',
      autor: '茗卡通·暴雨',
      lableList: ['热血', '校园', '科幻'],
      chapters: chapters,
      fraction: 3,
      comment: [
        { name: '666666', headPortrait: 'http://css99tel.cdndm5.com/v202012291638/blue/images/user/toux3.jpg', content: 'vue.esm.js?efeb:628 [Vue warn]: Unknown custom element: <van-action-sheet> - did you register the component correctly? For recursive components, make sure to provide the "name" option', commentTime: '2020-06-09' },
        { name: '88888', headPortrait: 'http://css99tel.cdndm5.com/v202012291638/blue/images/user/toux3.jpg', content: 'SDFRTHGFDERTHGFDSERGF', commentTime: '2020-06-09' },
        { name: '三刀流', headPortrait: 'http://css99tel.cdndm5.com/v202012291638/blue/images/user/toux3.jpg', content: 'qwedfrfghygfdsaA', commentTime: '2020-06-09' },
        { name: '一刀流', headPortrait: 'http://css99tel.cdndm5.com/v202012291638/blue/images/user/toux3.jpg', content: 'qwesaqwedsaqwertygfdsasdr', commentTime: '2020-06-09' },
        { name: '666666', headPortrait: 'http://css99tel.cdndm5.com/v202012291638/blue/images/user/toux3.jpg', content: 'qawrtgfdsaqrtrewqad', commentTime: '2020-06-09' },
        { name: '天刑', headPortrait: 'http://css99tel.cdndm5.com/v202012291638/blue/images/user/toux3.jpg', content: 'qwsedrft54ewsdfgt4wsdfrew', commentTime: '2020-06-09' },
        { name: '666666', headPortrait: 'http://css99tel.cdndm5.com/v202012291638/blue/images/user/toux3.jpg', content: 'qwerftyuqwert5tfdqwer', commentTime: '2020-06-09' },
        { name: '秀儿', headPortrait: 'http://css99tel.cdndm5.com/v202012291638/blue/images/user/toux3.jpg', content: 'hahahahhahahahahahaha', commentTime: '2020-06-09' },
        { name: '天刑', headPortrait: 'http://css99tel.cdndm5.com/v202012291638/blue/images/user/toux3.jpg', content: '12eefefsygsdafdqqfqfwad', commentTime: '2020-06-09' },
        { name: '666666', headPortrait: 'http://css99tel.cdndm5.com/v202012291638/blue/images/user/toux3.jpg', content: 'asdqwfsgwedqwdqdqdq', commentTime: '2020-06-09' },
        { name: '秀儿', headPortrait: 'http://css99tel.cdndm5.com/v202012291638/blue/images/user/toux3.jpg', content: 'qweqweqweqweqwewqefwefwsegefw', commentTime: '2020-06-09' },
        { name: '天刑', headPortrait: 'http://css99tel.cdndm5.com/v202012291638/blue/images/user/toux3.jpg', content: 'hahahaqweqeqweqwhhahweqeqweqqwahahahahaha', commentTime: '2020-06-09' },
        { name: '666666', headPortrait: 'http://css99tel.cdndm5.com/v202012291638/blue/images/user/toux3.jpg', content: 'adadadadadadawd', commentTime: '2020-06-09' },
        { name: '秀儿', headPortrait: 'http://css99tel.cdndm5.com/v202012291638/blue/images/user/toux3.jpg', content: 'heheeehheuhue', commentTime: '2020-06-09' }
      ],
      lastChapter: '206话',
      chapterState: '完结'
    };

    if (id % 2 === 0) {
      this.comic = douluo;
    } else {
      this.comic = mp;
    }
  },
  methods: {
    returnPage () {
      this.$router.go(-1);
    },
    toComic (item) {
      var id = this.$route.query.id;
      this.$router.push({
        path: '/comicBrowse',
        query: {
          id: id,
          chapter: item,
          title: this.comic.name

        }
      });
    },
    indexChange () {
      this.chapterOrChoose = !this.chapterOrChoose;
    },
    sortChange () {
      this.comic.chapters.reverse();
      if (this.iconSort === 'descending') {
        this.iconSort = 'ascending';
        this.nameSort = '正序';
      } else {
        this.iconSort = 'descending';
        this.nameSort = '倒序';
      }
    },
    onLoad () {
      setTimeout(() => {
        var array = [
          { name: '666666', headPortrait: 'http://css99tel.cdndm5.com/v202012291638/blue/images/user/toux3.jpg', content: 'DFGHYTRDCVGHYTRDHTREDF', commentTime: '2020-06-09' },
          { name: '88888', headPortrait: 'http://css99tel.cdndm5.com/v202012291638/blue/images/user/toux3.jpg', content: 'SDFRTHGFDERTHGFDSERGF', commentTime: '2020-06-09' },
          { name: '三刀流', headPortrait: 'http://css99tel.cdndm5.com/v202012291638/blue/images/user/toux3.jpg', content: 'qwedfrfghygfdsaA', commentTime: '2020-06-09' },
          { name: '一刀流', headPortrait: 'http://css99tel.cdndm5.com/v202012291638/blue/images/user/toux3.jpg', content: 'qwesaqwedsaqwertygfdsasdr', commentTime: '2020-06-09' },
          { name: '一刀流', headPortrait: 'http://css99tel.cdndm5.com/v202012291638/blue/images/user/toux3.jpg', content: 'heiheiheiheihei', commentTime: '2020-06-09' }
        ];

        for (var i = 0; i < array.length; i++) {
          this.comic.comment.push(array[i]);
        }

        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.comic.comment.length >= 20) {
          this.finished = true;
        }
      }, 1000);
    },
    chapterOrChooseChange (index) {
      this.$refs.swiperRefs.swipeTo(index);
    }
  }
};
</script>

<style lang="less" scoped>
.comicInfoSubject {
  width: 100%;
  height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
.comicInfoSubject .comicInfoHeader {
  width: 100%;
  height: 45px;
  display: flex;
  align-items: center;
  i {
    font-size: 25px;
  }
  font {
    font-size: 20px;
    font-weight: bold;
    margin-left: 5px;
  }
}
.comicInfoSubject .comicInfo {
  width: 100%;
  height: 200px;
  background: linear-gradient(to right, rgb(248 52 255), rgb(238, 10, 36));
  display: flex;
  flex-direction: row;
  .img {
    height: 100%;
    width: 160px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    a {
      width: 142px;
      height: 187px;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #ffffff;
      img {
        width: 140px;
        height: 186px;
      }
    }
  }
  .info {
    flex: 1;

    p {
      padding-left: 8px;
    }
    .title {
      display: block;

      margin-top: 14px;
      font-size: 25px;
      font-weight: bold;
    }
    .fraction {
      margin-top: 5px;
      /deep/ .van-rate {
        .van-rate__item {
          margin-right: 6px;
          i {
            font-size: 9px !important;
          }
        }
      }
    }
    .autor {
      margin-top: 5px;
      font-size: 14px;
      color: #ffffff;
    }
    .lable {
      margin-top: 5px;
      font-size: 14px;
      color: #ffffff;
      font {
        margin-right: 6px;
      }
    }
    .content {
      margin-top: 5px;
      font-size: 14px;
      color: #ffffff;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
    }
    .moreContent {
      color: #ffffff;
      font-size: 14px;
      color: #551a8b;
      width: 30px;
      position: relative;
      right: -170px;
    }
  }
}
.comicInfoSubject .optionDiv {
  width: 100%;
  height: 30px;
  margin-top: 10px;
  ul {
    height: 100%;
    li {
      display: block;
      width: 50%;
      height: 100%;
      float: left;
      font-size: 18px;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 1s;
    }
    .choose {
      color: #ffffff;
      background: linear-gradient(to right, rgb(248 52 255), rgb(238, 10, 36));
      //box-shadow: 0px -8px 9px -7px red inset;
    }
  }
}
.comicInfoSubject .comicInfoSortMian {
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 3px dashed #a7a7a7;
  font {
    color: black;
    font-size: 15px;
    margin-left: 5px;
    font {
      color: red;
    }
  }
  .comicSort {
    display: flex;
    align-items: center;
    font-size: 10px;
    margin-right: 5px;
    i {
      font-size: 17px;
    }
  }
}

.comicInfoSubject .comicInfoMian {
  width: 100%;
  flex: 1;
  overflow: auto;
}

.comicInfoSubject .comicInfoMian .swiperMain {
  height: 100%;
  /deep/ .van-swipe {
    height: 100%;
    .van-swipe__track {
      .chapters {
        overflow: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        div {
          height: 20px;
          width: 40px;
          background-color: #f6f6f6;
          margin-right: 5px;
          margin-left: 6px;
          float: left;
          display: flex;
          justify-content: center;
          align-items: center;
          border: 1px solid rgb(15, 15, 15);
          margin-top: 5px;
          border-radius: 5px;
        }
      }
      .comment {
        overflow: auto;
        /deep/ .van-list {
          .van-cell {
            width: 100%;

            padding: 0;
            .van-cell__value {
              display: flex;
              flex-direction: row;
              margin-top: 3px;
              .img {
                width: 60px;
                min-width: 60px;
                min-width: 50px;
                height: 100%;
                display: flex;

                justify-content: center;
                img {
                  width: 50px;
                  height: 50px;
                }
              }
              .userInfo {
                flex: 1;
                height: 100%;
                border-left: 1px dotted black;
                border-top: 1px dotted black;
                .userName {
                  display: block;
                  width: 100%;
                  height: 25px;
                  font-size: 20px;
                  padding-left: 10px;
                  margin-top: 5px;
                  font-weight: bold;
                }
                .commentTime {
                  display: block;
                  width: 100%;
                  height: 20px;
                  font-size: 15px;
                  padding-left: 10px;
                  margin-top: 3px;
                }
                .content {
                  display: block;
                  width: 100%;
                  font-size: 17px;
                  padding-left: 10px;
                  max-width: 295px;
                  margin-top: 10px;
                  color: #a7a7a7;
                  margin-bottom: 10px;
                }
              }
            }
          }
        }
      }
    }
  }
}

.comicInfoSubject /deep/ .van-popup {
  display: flex;
  justify-content: center;
  overflow: hidden;
  font {
    display: block;
    width: 90%;
    height: 100%;
    overflow: auto;
    padding-top: 35px;
    color: #b1b1b1;
  }
  i {
    top: 10px;
    right: 8px;
  }
}
</style>>
